<template>
    <view class="u-input u-border item" @tap="show = true">
        <view>
            {{ label }}
        </view>
        <view class="flex-1 ml-2">
            {{ modelValue }}
            <text class="text-gray-400" v-if="modelValue == undefined || modelValue == ''">{{ placeholder }}</text>
        </view>
        <u-icon name="arrow-down"></u-icon>
    </view>

    <u-datetime-picker :show="show" @close="show = false" @cancel="show = false" :modelValue="pickerValue"
        closeOnClickOverlay @update:modelValue="confirm" :mode="mode" :maxDate="maxDate"
        :minDate="minDate"></u-datetime-picker>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
let props = withDefaults(defineProps<{
    label?: string,
    modelValue?: number | string,
    placeholder?: string,
    mode?: 'year-month' | 'time' | 'date' | 'datetime',
    formatter?: string,
    maxDate?: number,
    minDate?: number
}>(), {
    placeholder: '请选择时间',
    mode: 'year-month',
    formatter: 'YYYY-MM-DD HH:mm',
    maxDate: new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 100,
    minDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 365 * 100
})
let emit = defineEmits(['update:modelValue'])
let show = ref(false);

function confirm(value: string) {
    show.value = false;
    emit('update:modelValue', timestampToDateTimeString(value, props.formatter))
}
let pickerValue = computed(() => {

    if (!props.modelValue) return new Date().getTime();
    if (typeof props.modelValue == 'number') return props.modelValue;
    if (typeof props.modelValue == 'string') return dateTimeStringToTimestamp(props.modelValue, props.formatter);
    return new Date().getTime()
})

// 将年月日时分秒转换为时间戳
function dateTimeStringToTimestamp(dateTimeString: string, format = 'YYYY-MM-DD HH:mm:ss') {
    const yearIndex = format.indexOf('YYYY');
    const monthIndex = format.indexOf('MM');
    const dayIndex = format.indexOf('DD');
    const hoursIndex = format.indexOf('HH');
    const minutesIndex = format.indexOf('mm');
    const secondsIndex = format.indexOf('ss');

    const year = dateTimeString.slice(yearIndex, yearIndex + 4) || '1971';
    const month = dateTimeString.slice(monthIndex, monthIndex + 2) || '01';
    const day = dateTimeString.slice(dayIndex, dayIndex + 2) || '01';
    const hours = dateTimeString.slice(hoursIndex, hoursIndex + 2) || '00';
    const minutes = dateTimeString.slice(minutesIndex, minutesIndex + 2) || '00';
    const seconds = dateTimeString.slice(secondsIndex, secondsIndex + 2) || '00';
    const timestamp = new Date(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}`).getTime();
    return timestamp;
}
// 将时间戳转换为年月日时分秒
function timestampToDateTimeString(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    let formattedDateTime = format.replace('YYYY', year + '');
    formattedDateTime = formattedDateTime.replace('MM', month);
    formattedDateTime = formattedDateTime.replace('DD', day);
    formattedDateTime = formattedDateTime.replace('HH', hours);
    formattedDateTime = formattedDateTime.replace('mm', minutes);
    formattedDateTime = formattedDateTime.replace('ss', seconds);

    return formattedDateTime;
}
</script>
<style scoped lang="scss">
.item {
    @apply rounded h-[24px] py-[6px] px-[9px] flex items-center box-content;
}
</style>
<style lang="scss">
l-date-time {
    @apply block;
}
</style>